<script setup>
import {onMounted, ref, reactive} from 'vue';
import {get, post} from '../js/http.js';
import pagination from '../components/pagination.vue'
import icon from '../components/icon.vue'
import pageHead from '../components/pagehead.vue'

const page = ref(0)
const isEdit = ref(false)
let userData = ref({data:[],total:0,totalPage:0,page:0})
let currentIndex = ref({})

onMounted(() => {
  getUser();
})

async function openModel(item, type) {
  isEdit.value = 'is-active'
  currentIndex.value = item
}
async function deleteHandle(item,itemIndex) {
  if(item.id){
    post("/admin/user/delete",item).then(res => {
    }).catch(error => console.log(error))
  }
  userData.value.splice(itemIndex,1);
}

function addHandle() {
  userData.value.push({})
  currentIndex.value = userData.value[userData.value.length-1]
  isEdit.value = 'is-active'
}


async function getUser() {

  get("/admin/user/get",{page:page.value}).then(res => {
    userData.value = res.result;
  })
  .catch(error => console.log(error))
}
async function closeModel() {
  isEdit.value = ''

}
async function saveHandle() {
  isEdit.value = ''
  let res = await post("/admin/user/update", currentIndex.value)
  if (res.success) {
    window.message("保存成功", 'success')
    getUser();
  } else {
    window.message(res.message, 'warning')
  }
}
async function changeHandler(ipage) {

  if(ipage<=1){
    ipage = 0;
  }
  if(ipage>logData.value.totalPage){
    ipage = logData.value.totalPage;
  }
  page.value =ipage-1;
  getUser();
}
</script>
<template>
  <pageHead title="用户管理" iconName="user">
    <button class="button is-link is-outlined mr-3" @click="getUser"><icon icon="refresh" class="is-link mr-1"></icon>刷新</button>
    <button class="button is-link is-outlined" @click="addHandle"><icon icon="add-bold" class="is-link mr-1"></icon>新增用户</button>
  </pageHead>
  <div v-if="userData">
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th>用户名</th>
        <th>密码</th>
        <th>类型</th>
        <th style="text-align: center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,itemIndex) in  userData.data" :key="item.Name">
        <td>{{ item.username }}</td>
        <td>{{ item.password }}</td>
        <td>{{ item.type}}</td>
        <td style="text-align: center">
          <a @click="openModel(item,0)">设置</a>
          <a @click="deleteHandle(item,itemIndex)" class="ml-2">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div v-else>获取数据中</div>
  <div :class="['modal', isEdit]">
    <div class="modal-background"></div>
    <div class="modal-card" style="width:960px">
      <header class="modal-card-head">
        <p class="modal-card-title">用户设置</p>
        <button class="delete" aria-label="close" @click="closeModel"></button>
      </header>
      <section class="modal-card-body">
        <!--索引设置 Begin-->
        <div v-if="currentIndex">
          <div class="field">
            <label class="label">用户名</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder=""
                     v-model="currentIndex.username">
            </div>
            <span class="help is-success">名称只能是英文</span>
          </div>
          <div class="field">
            <label class="label">密码</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder=""
                     v-model="currentIndex.password">
            </div>
            <span class="help is-success"></span>
          </div>
          <div class="field">
            <label class="label">类型</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <select v-model="currentIndex.type">
                  <option value="admin">管理员</option>
                  <option value="client">客户端</option>
                </select>
              </div>
            </div><span class="help is-success">管理员可以登录管理后台，客户端可通过客户端程序访问索引.</span>
          </div>
        </div>
        <!--索引设置 End-->
      </section>
      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
        <div class="buttons">
          <button class="button is-link" @click="saveHandle">保存</button>
        </div>
      </footer>
    </div>
  </div>
  <pagination :current-page="userData.page+1" :total-pages="userData.totalPage" @pageRefresh="getUser" @pageChange="changeHandler"></pagination>


</template>
<style scoped>
</style>
